<template>
    <div class="home-view" :style="{ backgroundImage:`url(${$imageSrcFormatter('03纪委答题-首页/背景.png')})` }">
        <div class="home-btn-group">
            <ScaleButton src="03纪委答题-首页/规则说明.png" @MmvTap="handleShowRuleDialog"></ScaleButton>
            <ScaleButton src="03纪委答题-首页/开始答题 .png" @MmvTap="handleShowPerfectInformation"></ScaleButton>
        </div>
        <!-- 完善信息弹窗 -->
        <PerfectInfomation :visible.sync="showPerfectInformation" @submit="handleRunGame"></PerfectInfomation>
        <!-- 规则说明弹窗 -->
        <RuleDialog :visible.sync="showRuleDialog"></RuleDialog>
        <!-- 无次数弹窗 -->
        <NotGameNum :visible.sync="showNotGameNum"></NotGameNum>
    </div>
</template>

<script>
import PerfectInfomation from '@/components/PerfectInformation/index.vue';
import RuleDialog from '@/components/RuleDialog/index.vue';
import NotGameNum from '@/components/NotGameNum/index.vue';

export default {
    name: 'HomeView',
    components: {
        PerfectInfomation,
        RuleDialog,
        NotGameNum,
    },
    data() {
        return {
            showNotGameNum: false,
            showPerfectInformation: false,
            showRuleDialog: false,
        };
    },
    methods: {
        handleShowRuleDialog() {
            this.showRuleDialog = true;
        },
        async handleShowPerfectInformation() {
            const hasGameNum = await this.$store.dispatch('app/handleUseGameNum');
            if (hasGameNum) {
                this.showPerfectInformation = true;
            } else {
                this.showNotGameNum = true;
            }
        },
        handleRunGame() {
            this.$router.replace({ name: 'Question' }).catch(() => { });
        },
    },
};
</script>

<style lang="scss" scoped>
.home-view {
    @include mmv-view-backage;
    display: flex;
    align-items: center;
    justify-content: center;
    .home-btn-group {
        position: absolute;
        top: 112vw;
    }
}
</style>
